<script setup lang="ts">
import {ref} from "vue";
import TextSlot from "@/components/purchase/TextSlot.vue";
import BigImageSlot from "@/components/purchase/BigImageSlot.vue";
import SmallImageSLot from "@/components/purchase/SmallImageSLot.vue";
import VdeioSLot from "@/components/purchase/VdeioSLot.vue";

const components = ref([])


const addTextComponent = ()=>{
  components.value.push({component:TextSlot})
}
const addBigImgComponent = ()=>{
  components.value.push({component:BigImageSlot})
}

const addSmallImgComponent = ()=>{
  components.value.push({component:SmallImageSLot})
}
const addVdeioComponent = ()=>{
  components.value.push({component:VdeioSLot})
}

</script>

<template>
  <div class="content-layout">
    <el-button icon="Document" @click="addTextComponent"></el-button>
    <el-button icon="Picture" @click="addBigImgComponent"></el-button>
    <el-button icon="Picture" @click="addSmallImgComponent" ></el-button>
    <el-button icon="Film" @click="addVdeioComponent" ></el-button>

   <div class="slot_item" v-for="(slot,index) in components" :key="slot.id">
     <component :is="slot.component" ></component>
   </div>
  </div>
</template>

<style scoped lang="scss">

</style>
